<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人博客页面示例</title>
  <style>
    /* 全局样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      background-color: #f9f9f9;
    }

    /* 页面容器 */
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: white;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

    /* 文章标题样式 */
    h1 {
      font-size: 28px;
      margin-bottom: 10px;
      color: #333;
    }

    /* 文章元信息样式（作者、时间） */
    .meta-info {
      color: #777;
      font-size: 14px;
      margin-bottom: 20px;
    }

    /* 文章内容样式 */
    p {
      margin-bottom: 15px;
    }

    /* 分割线样式 */
    hr {
      border: none;
      border-top: 1px solid #e0e0e0;
      margin: 20px 0;
    }

    /* 评论区标题样式 */
    h2 {
      font-size: 20px;
      margin-bottom: 10px;
      color: #333;
    }

    /* 单个评论样式 */
    .comment {
      border: 1px solid #e0e0e0;
      border-radius: 5px;
      padding: 15px;
      margin-bottom: 15px;
    }

    .comment-author {
      font-weight: bold;
      color: #333;
      margin-bottom: 5px;
    }

    .comment-content {
      color: #555;
    }

    /* 评论输入框和按钮样式 */
    textarea {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #e0e0e0;
      border-radius: 5px;
    }

    button {
      background-color: #007BFF;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    button:hover {
      background-color: #0056b3;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>HTML 与 CSS 的魅力：打造美观页面</h1>
    <div class="meta-info">
      作者：小明 | 发布时间：2024年10月15日
    </div>
    <p>在现代网页设计中，HTML 和 CSS 是不可或缺的两大技术。HTML 负责构建页面的结构，而 CSS 则赋予页面美观的样式和布局。</p>
    <p>通过合理运用 HTML 的各种标签，我们可以清晰地组织页面的内容，比如标题、段落、列表、图片等。而 CSS 则可以对这些元素进行样式设置，包括颜色、字体、大小、边距、背景等。</p>
    <p>例如，我们可以使用 CSS 的选择器来精确地选择需要样式化的元素，然后通过属性和值来定义其外观。这样，我们就能够创建出各种各样独特且美观的页面。</p>
    <hr>
    <h2>评论区</h2>
    <div class="comment">
      <div class="comment-author">小红</div>
      <div class="comment-content">写得很棒，学习到了很多关于 HTML 和 CSS 的知识！</div>
    </div>
    <div class="comment">
      <div class="comment-author">小李</div>
      <div class="comment-content">希望能多分享一些实际案例和技巧。</div>
    </div>
    <textarea placeholder="请输入你的评论"></textarea>
    <button>发表评论</button>
  </div>
</body>

</html>